<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var image, canvas, ctx;
function init() {
    canvas = document.getElementById("canvas1");
	// 描画コンテキストを取得
	ctx = canvas.getContext("2d");
    reset();
}
function drawImage() {
    // img要素を作成
    image = document.createElement("img");
    // 画像の読み込みが完了したら
    image.onload = function() {
		// 画像を描画
		ctx.drawImage(image, 0, 0);
    };
    // 画像のURLをセットし、読み込み開始
	image.src = "w3c_home.png";
}
function reflect() {
    // 画像を半透明にし、画像を反転させて描画
	ctx.globalAlpha = .2;
	ctx.transform(1, 0, 0, -1, 0, image.height * 2);
	ctx.drawImage(image, 0, 0);
}
function reset() {
    canvas.width = canvas.width;
    drawImage();
}
</script>
</head>
<body onload="init()">
<canvas id="canvas1" width="200" height="100">
</canvas><br>
<button onclick="reflect()">画像の移り込み</button>
<button onclick="reset()">リセット</button>
</body>
</html>
